
<script setup>
import { ref,computed } from 'vue';
const props = defineProps({
  dataList:{
    type:Object,
    required:true,
    default: ()=>{
      return{
        xrr:[],yArr:[]
      }
    }
  },
  // 1 最高分 2中位数 3 平均分
  type:{
    type:String,
    default:'1'
  },
  displayType:{
    type:String,
    default:'1'
  }

})


const option=computed(()=>{

  return{
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     type: 'shadow'
    //   }
    // },
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     type: 'shadow'
    //   },
    //   formatter: function(params) {
    //     console.log(params)
    //     // params是一个数组，包含了当前悬浮的所有数据点信息
    //     var result = '';
    //     params.forEach(function(item) {
    //       result += item.seriesName + '<br/>' +
    //         item.name + ' : ' + item.value + '<br/>';
    //     });
    //     return result;
    //   }
    // },

    xAxis: {
      type: 'category',
      data:props.dataList.xArr? props.dataList?.xArr:[],
      axisLine: {
        lineStyle: {
          color: '#e6e5e7' // 设置 X 轴线的颜色
        }
      },
      axisLabel: {
        color: '#aba8b0' // 设置 X 轴标签字体的颜色
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e6e5e7' // 设置 X 轴线的颜色
        }
      },
      axisLabel: {
        color: '#aba8b0' // 设置 X 轴标签字体的颜色
      }
    },
    grid: {
      top:30,
      left: 0,
      right:0,
      x: 0,
      y: 10,
      x2: 10,
      y2: 0,
      containLabel: true,
      show: true, //
    },
    series: props.displayType === '1'?[
      {
        data: props.dataList?.yArr? props.dataList?.yArr[0]?.data :[],
        // data:['1','1'],
        type: 'bar',
        itemStyle: {
          borderRadius: [5, 5, 0, 0], //设置柱状图圆角
          opacity: 0.8,
          color: '#c8afff' // 设置颜色为红色
        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '总分：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      },
      {
        data: props.dataList?.yArr?props.dataList?.yArr[1]?.data : [],
        type: 'bar',

        itemStyle: {
          color: '#6ecefe',
          borderRadius: [5, 5, 0, 0], //设置柱状图圆角
          opacity: 0.8,

        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '英语：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      },
      {
        data: props.dataList?.yArr?props.dataList?.yArr[2]?.data:[],
        type: 'bar',
        itemStyle: {
          color: '#9edb71', //设置柱状图颜色
          opacity: 0.8,
          borderRadius: [5, 5, 0, 0] //设置柱状图圆角
        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '数学：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      },
      {
        data:props.dataList?.yArr?props.dataList?.yArr[3]?.data :[],
        type: 'bar',
        itemStyle: {
          color: '#fed060', // 设置颜色为红色
          opacity: 0.8,
          borderRadius: [5, 5, 0, 0]
        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '语文：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      }
    ]:[

      {
        data: props.dataList?.yArr? props.dataList?.yArr[0]?.data :[],
        // data:['1','1'],
        type: 'bar',
        itemStyle: {
          borderRadius: [5, 5, 0, 0], //设置柱状图圆角
          opacity: 0.8,
          color: '#6ecefe' // 设置颜色为红色
        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '德：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      },
      {
        data: props.dataList?.yArr?props.dataList?.yArr[1]?.data : [],
        type: 'bar',
        itemStyle: {
          color: '#9edb71',
          borderRadius: [5, 5, 0, 0], //设置柱状图圆角
          opacity: 0.8,

        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '智：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      },
      {

        data: props.dataList?.yArr?props.dataList?.yArr[2]?.data:[],
        type: 'bar',
        itemStyle: {
          color: '#5fd1bf', //设置柱状图颜色
          opacity: 0.8,
          borderRadius: [5, 5, 0, 0] //设置柱状图圆角
        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '体：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      },
      {
        data:props.dataList?.yArr?props.dataList?.yArr[3]?.data :[],
        type: 'bar',
        itemStyle: {
          color: '#fed060', // 设置颜色为红色
          opacity: 0.8,
          borderRadius: [5, 5, 0, 0]
        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '美：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      },
      {
        data:props.dataList?.yArr?props.dataList?.yArr[3]?.data :[],
        type: 'bar',
        itemStyle: {
          color: '#76a7e2', // 设置颜色为红色
          opacity: 0.8,
          borderRadius: [5, 5, 0, 0]
        },
        label: {
          show: false, // 初始时不显示label
          position: 'top',// label显示在柱子顶部
          formatter: function(params) {
            console.log(params)
            return  '劳：'+params.data

          }
        },
        emphasis: { // 悬浮时的样式
          label: {
            show: true // 悬浮时显示label
          }
        }
      }
    ]
  };
})
</script>

<template>

  <e-charts class="chart" :option="option" />
</template>

<style>
.chart{
  height: 300px;
}
</style>
